<template>
	<view class="main-page">
		<!-- 顶部日期和标语 -->
		<view class="header">
			<view class="date">
				<text class="month">{{ currentMonth }}</text>
					<text class="divider-line"></text>
				<text class="day">{{ currentDay }}</text>
			
			</view>
			<text class="slogan">{{ weekday }}，只学一点点</text>
		</view>

		<!-- 单词卡片 -->
		<view class="word-card">
			<!-- 装饰圆点 -->
			<view class="dots">
				<view class="dot"></view>
				<view class="dot"></view>
			</view>
			
			<!-- 松鼠图片 -->
			<image class="squirrel" src="/static/squirrel.png" mode="aspectFit"></image>
			
			<!-- 内容包装器 -->
			<view class="content-wrapper">
				<!-- 单词内容 -->
				<view class="word">demand</view>
				<view class="phonetic">
					<image src="/static/sound.png" class="sound-icon" @tap="playSound"></image>
					<text>美[dɪˈmænd]</text>
				</view>
				
				<!-- 词义 -->
				<view class="meanings">
					<view class="meaning-item">
						<text class="type">n.</text>
						<text class="desc">要求；需求</text>
					</view>
					<view class="meaning-item">
						<text class="type">vt.</text>
						<text class="desc">强烈要求；需要</text>
					</view>
				</view>

				<!-- 例句 -->
				<view class="examples">
					<text class="example-title">例句</text>
					<view class="example-item">
						<view class="en">
							<image src="/static/sound.png" class="sound-icon" @tap="playExampleSound(1)"></image>
							<text>
								<text class="highlight">Demand</text> for this product is increasing.
							</text>
						</view>
						<view class="cn">这个产品的需求在不断增加。</view>
					</view>
					<view class="example-item">
						<view class="en">
							<image src="/static/sound.png" class="sound-icon" @tap="playExampleSound(2)"></image>
							<text>I had no right to make <text class="highlight">demands</text> on his time.</text>
						</view>
						<view class="cn">我无权占用他的时间。</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item active">
				<view class="icon-wrapper">
					<image src="/static/main.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="tab-item" @tap="goToList">
				<view class="icon-wrapper">
					<image src="/static/trophy.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="tab-item" @tap="goToMy">
				<view class="icon-wrapper">
					<image src="/static/achievement.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 日期相关
const currentDay = ref('')
const currentMonth = ref('')
const weekday = ref('')

// 初始化日期
const initDate = () => {
	const date = new Date()
	currentDay.value = date.getDate().toString().padStart(2, '0')
	currentMonth.value = (date.getMonth() + 1).toString().padStart(2, '0')
	const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
	weekday.value = weekdays[date.getDay()]
}

// 播放音频
const playSound = () => {
	// TODO: 实现单词发音
}

const playExampleSound = (index) => {
	// TODO: 实现例句发音
}

// 页面跳转
const goToList = () => {
	uni.redirectTo({ url: '/pages/list/list' })
}

const goToMy = () => {
	uni.redirectTo({ url: '/pages/my/my' })
}

// 页面加载时初始化
onMounted(() => {
	initDate()
})
</script>

<style lang="scss">
.main-page {
	min-height: 100vh;
	background-color: #E8F6F6;
	padding: 40rpx 30rpx;
	padding-bottom: 120rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 30rpx;
	flex-shrink: 0;
	margin-top: -10rpx;
	
	.date {
		display: flex;
		flex-direction: column;
		
		align-items: flex-start;
		margin-bottom: 8rpx;
		position: relative;
		
		.day {
			font-size: 44rpx;
			font-weight: bold;
			line-height: 1;
			margin-bottom: 4rpx;
		}
		
		.divider-line {
			width: 30rpx;
			height: 2rpx;
			background-color: #333;
			margin: 8rpx 0;
		}
		
		.month {
			font-size: 32rpx;
			color: #333;
			line-height: 1;
		}
	}
	
	.slogan {
		font-size: 40rpx;
		color: #666;
		text-align: right;
		align-self: flex-end;
	}
}

.word-card {
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 80rpx 40rpx 40rpx;
	position: relative;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	height: 900rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 15vh;
	
	// 添加装饰圆点
	.dots {
		position: absolute;
		left: 40rpx;
		top: -6rpx;
		display: flex;
		gap: 10rpx;
		
		.dot {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #E8F6F6;
		}
	}
	
	.squirrel {
		position: absolute;
		right: 10rpx;
		top: -50rpx;
		width: 160rpx;
		height: 160rpx;
		transform: rotate(10deg);
	}
	
	// 内容区域包装器
	.content-wrapper {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.word {
		font-size: 44rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
		color: #333;
	}
	
	.phonetic {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.sound-icon {
			width: 28rpx;
			height: 28rpx;
			margin-right: 8rpx;
		}
		
		text {
			color: #666;
			font-size: 28rpx;
		}
	}
}

.meanings {
	margin-bottom: 30rpx;
	
	.meaning-item {
		display: flex;
		margin-bottom: 12rpx;
		
		.type {
			color: #5CD3D3;
			margin-right: 16rpx;
			font-size: 30rpx;
		}
		
		.desc {
			font-size: 30rpx;
			color: #333;
		}
	}
}

.examples {
	.example-title {
		font-size: 30rpx;
		color: #666;
		margin-bottom: 16rpx;
		display: block;
	}
	
	.example-item {
		margin-bottom: 20rpx;
		
		.en {
			display: flex;
			align-items: flex-start;
			margin-bottom: 8rpx;
			
			.sound-icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
				margin-top: 6rpx;
			}
			
			text {
				font-size: 30rpx;
				color: #333;
				line-height: 1.5;
				
				.highlight {
					color: #FF6B6B;
				}
			}
		}
		
		.cn {
			font-size: 28rpx;
			color: #666;
			padding-left: 32rpx;
		}
	}
}

.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: #FFFFFF;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 30rpx;
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.05);
	z-index: 1;
	
	.tab-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 10rpx;
		
		.icon-wrapper {
			width: 100rpx;
			height: 70rpx;
			background-color: #5CD3D3;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0.9;
		}
		
		image {
			width: 40rpx;
			height: 40rpx;
		}
		
		&.active .icon-wrapper {
			opacity: 1;
		}
	}
}
</style>
